/*
 功能  导入ReactDOM
 注意：如果你使用是react-dom18版本之后的，建议大家使用react-dom/client
 作用：React DOM 是 React 库中负责将组件渲染到浏览器 DOM 的模块
*/
import ReactDOM from 'react-dom/client'
import React from 'react'
/*
  功能:调用ReactDOM的createRoot方法，创建ReactRoot对象，因为该对象中有一个render方法，用来渲染所有的DOM元素
  方法说明:ReactDOM.createRoot方法的参数是一个DOM元素，该dom是用来渲染的容器
*/
const root=ReactDOM.createRoot(document.getElementById('root'))
/*
  功能：调用root的render方法用来信息到页面
  方法说明:root.render(参数):参数是一个虚拟DOM

  虚拟DOM的创建有两种方式
  1、JSX:本讲不讲，下节课重点讲
  2、通过React.createElement()方法来实现创建虚拟DOM的
  3、注意：
  1) JSX的方式最终在底层是要转成React.createElement的方式创建虚拟DOM
  2) JSX是通过babel插件来进行翻译的
  3）是因为React.createElement的方式创建虚拟DOM的方式太难了
  4、React.createElement方法的说明
  1）该方法的主要作用是用来创建虚拟DOM的
  2）方法的参数说明
    参数1：标签名称
    参数2：属性对象
    参数3：子节点的集合
*/

const firstLiVNode=React.createElement("li",{style:{color:'red'},key:0},"apple")
const secondLiVNode=React.createElement("li",{style:{color:'orange'},key:1},"orange")
const VNode=React.createElement("ul",null,[firstLiVNode,secondLiVNode])
root.render(VNode)